<template>
  <div class="acount">
    <div class="header flex js-sp">
      <div class="left-num text-left">
        <div class="mb-10">{{ $t("assets.currencyAccountValuation") }}:</div>
        <div class="text-14 textf-din flex align-center text-left">
          <div class="textperson-t2 text-bolder ">
            {{
              $currency(
                decimalDigitsInputFilter(data?.convert_usd, 4)
              )
            }}
            BTC
          </div>
          <div class="textperson-t2 ">/</div>
          <div class="textperson-t2 ">
            {{
              $currency(
                decimalDigitsInputFilter(data?.convert_usd, 4)
              )
            }}
            USD
          </div>
        </div>
      </div>
      <div class="left-num text-left" v-if="!virtual_wallet">
        <div class="mb-10">
          {{ $t("user.24H") }} {{ $t("user.withdrawalLimit") }}:
        </div>
        <div class="text-14 textf-din flex js-sp align-center">
          <span class="textperson-t2 text-bolder inline-block">
            {{
              $currency(
                decimalDigitsInputFilter(
                  data?.withdrawal_limit - data?.withdrawn_number,
                  4
                )
              )
            }}/{{
              $currency(decimalDigitsInputFilter(data?.withdrawal_limit, 4))
            }}
            BTC
          </span>
          <router-link
            to="/person/accountSet"
            class="up point pborderlink personlink text-12 radius text-center"
            >{{ $t("assets.increaseQuota") }}</router-link
          >
        </div>
      </div>
      <div class="input-center cust-input">
        <el-input
          v-model="state.currency"
          @change="find"
          :placeholder="$t('tips.currencyTip')"
        >
          <template #prefix>
            <img
              style="margin-top:10px;margin-inline-start:5px"
              src="@/assets/images/search.png"
              class="search-icon"
              alt
            />
          </template>
        </el-input>
      </div>
      <div class="right flex js-sp align-center">
        <el-switch
          v-model="state.ishidden"
          active-color="#E54B4B"
          @change="hidden"
          inactive-color="#EAECEF"
        ></el-switch>
        <span class="text-14 persontext-t2 point">
          {{ $t("assets.hideSmallAssets") }}
        </span>
        <el-tooltip
          class="item"
          effect="dark"
          :content="$t('assets.hidden')"
          placement="top"
        >
          <i class="el-icon-warning-outline text-16"></i>
        </el-tooltip>
      </div>
    </div>
    <div
      class="text-14 mb-30 pd-hr-30"
      v-if="todayProfit && !virtual_wallet"
      :class="state.assetsInfo?.convert_usd < 0 ? 'text-red' : 'text-green'"
    >
      <div class="flex align-center">
        <div class="mg-rt-xs">{{ $t("exchange.todayProfit") }}:</div>
        <div class="text-bolder">
          {{ state.assetsInfo?.convert_usd > 0 ? "+" : ""
          }}{{ state.assetsInfo?.convert_usd }} USD
        </div>
        <div class="text-bolder">/</div>
        <div class="text-bolder">
          {{ state.assetsInfo?.spot_profit_ratio > 0 ? "+" : ""
          }}{{
            decimalDigitsInputFilter(
              state.assetsInfo?.spot_profit_ratio * 100,
              2
            )
          }}
          %
        </div>
      </div>
    </div>
    <!-- 表格数据 -->
    <div class="table">
      <el-table
        :data="state.tableData"
        header-cell-class-name="eltablebg"
        style="width: 100%"
      >
        <el-table-column
          prop="currency_code"
          :label="$t('assets.currency')"
        ></el-table-column>
        <el-table-column prop :label="$t('assets.lumpSum')">
          <template #default="r">
            <span>{{
              $currency(
                r.row.sum_balance
                // accAdd(
                //   r.row.transaction_balance,
                //   r.row.transaction_lock_balance
                // )
              )
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="transaction_balance"
          :label="$t('assets.availableBalance')"
        >
          <template #default="r">{{
            $currency(r.row.balance)
          }}</template>
        </el-table-column>
        <el-table-column
          prop="transaction_lock_balance"
          :label="$t('assets.orderFreeze')"
        >
          <template #default="r">{{
            $currency(r.row.lock_balance)
          }}</template>
        </el-table-column>
        <el-table-column
          prop="transaction_system_lock_balance"
          :label="$t('assets.lockUp')"
        >
          <template #default="r">{{
            $currency(r.row.transaction_system_lock_balance)
          }}</template>
        </el-table-column>
        <el-table-column
          prop="btc_number"
          width="170"
          :label="$t('assets.BTC_valuation')"
          ><template #default="r">
            {{ $currency(dolt(r.row.btc_number)) }}
          </template>
        </el-table-column>
        <el-table-column prop :label="$t('assets.operate')" width="270">
          <template #default="r">
            <!-- <span
              class="personlink mr-16 point"
              v-if="r.row.currency_recharge_status"
              @click="recharge(r.row.currency_id)"
              >入金</span
            >

            <span
              class="personlink mr-16 point"
              v-if="r.row.currency_recharge_status"
              @click="handleExchange(r.row.currency_id)"
              >汇兑</span
            > -->
            <!-- v-if="r.row.currency_recharge_status && !virtual_wallet" -->
            <span
            v-if="r.row.currency.open_recharge==1"
              class="personlink mr-16 point"
           
              @click="recharge(r.row.currency_id)"
              >{{ $t("assets.recharge") }}</span
            >
            <!-- v-if="r.row.currency_withdraw_status && !virtual_wallet" -->
            <span
            v-if="r.row.currency.open_draw==1"
              class="personlink mr-16 point"
              @click="cash(r.row.currency_id)"
           
              >{{ $t("assets.withdrawMoney") }}</span
            >
            <span
              class="personlink mr-16 point"
              @click="goexchange()"
              v-show="status"
            >
              {{ $t("assets.toTrade") }}
            </span>
            <span
              class="personlink point"
              @click="assetsAccount(r.row.currency_id)"
              >{{ $t("assets.billingDetails") }}</span
            >
          </template>
        </el-table-column>
        <template #empty>
          <Norecord />
        </template>
      </el-table>
    </div>
    <Messagebox
      :text="$t('formTip.cashTip')"
      :dialog="state.dialogSafetyTip"
      :type="state.safetyType"
      @onconfirm="confirm"
      @viewSafeStatus="viewSafeStatus"
      @oncancer="onCancel"
    />
    <VerifiedBox
      :text="$t('formTip.certificationTip')"
      :dialog="state.dialogVerfiedTip"
      :type="state.type"
      @onconfirm="onVerfiedConfirm"
      @viewSafeStatus="onVerfiedConfirm"
      @oncancer="onVerfiedCancel"
    />
  </div>
</template>

<script>
import { onMounted, reactive, computed, watch } from "vue";
import Norecord from "@/components/noRecord/NoRecord.vue";
import Messagebox from "@/components/messageBox/index.vue";
import { useRouter } from "vue-router";
import { decimalDigitsInputFilter, transferToNumber } from "@/utils/common";
import { accAdd } from "@/utils/calculation";
import { useStore } from "vuex";
import VerifiedBox from "@/components/verifiedBox/index.vue";
import UseSystemSetting from "@/commonapi/useSystemSetting";

export default {
  name: "Bibiacount",
  props: { data: Object, status: Boolean, todayProfit: Boolean },
  emits: ["assetsAccount", "showExchange"],
  components: { Norecord, Messagebox, VerifiedBox },
  setup(props, { emit }) {
    const state = reactive({
      safetyType: 0,
      type: 0,
      currency: "",
      ishidden: false,
      dialogVisible: false,
      dialogSafetyTip: false,
      tableData: [],
      account: [],
      dialogVerfiedTip: false,
      assetsInfo: {},
    });
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    watch(
      () => props.data,
      (val) => {
        state.tableData = val.accounts;
        state.assetsInfo = val;
      }
    );
    /**
     * methods
     */

    const $router = useRouter();
    const $store = useStore();
    onMounted(() => {
      if (props.data) {
        state.tableData = props.data.accounts;
        console.log(props.data.accounts,'mounted')
        state.assetsInfo = props.data;
      }
    });
    const securityInfo = computed(() => {
      return $store.state.user.securityInfo;
    });
    const confirm = () => {
      state.dialogSafetyTip = false;
      $router.push("/person/Advanced");
    };
    const viewSafeStatus = () => {
      state.dialogSafetyTip = false;
      $router.push("/person/Advanced");
    };
    const onCancel = () => {
      state.dialogSafetyTip = false;
    };
    // 隐藏小额资产
    const hidden = (val) => {
      if (val) {
        state.tableData = props.data.accounts.filter((item) => {
          return item.btc_number > 0.001;
        });
      } else {
        state.tableData = props.data.accounts;
      }
    };
    //汇兑
    const handleExchange = (id) => {
      emit("showExchange", id);
    };
    // 账单明细
    const assetsAccount = (id) => {
      emit("assetsAccount", id);
    };
    // 查询币种
    const find = (val) => {
      state.tableData = props.data.accounts.filter((item) => {
        return item.currency_name.includes(val);
      });
    };
    // 点击充值
    const recharge = (id) => {
      $router.push("/person/recharge?id=" + id);
    };
    const onVerfiedConfirm = () => {
      state.dialogVerfiedTip = false;
      $router.push("/person/Authentication");
    };
    const onVerfiedCancel = () => {
      state.dialogVerfiedTip = false;
    };
    //是否需要实名
    const isVerified = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "verify_switch") {
          if (
            ele.value[5] &&
            $store.state.user.securityInfo.user_auth_level !== 2
          ) {
            if ($store.state.user.securityInfo.user_auth_level !== 4) {
              state.type = 1;
            }
            flag = true;
          }
        }
      });
      return flag;
    });
    // 点击提现
    const cash = (id) => {
      // if (
      //   securityInfo.value.user_safety_certificate_status &&
      //   securityInfo.value.user_safety_certificate_type !== 2
      // ) {
      //   if (securityInfo.value.user_safety_certificate_type !== 4) {
      //     state.safetyType = 1;
      //   }
      //   state.dialogSafetyTip = true;
      //   return;
      // }
      // if (isVerified.value) {
      //   state.dialogVerfiedTip = true;
      //   return false;
      // }

      $router.push("/person/cash?id=" + id+'&type=cash');
    };
    // 点击去交易
    const goexchange = () => {
      $router.push("/deal");
    };
    const dolt = (val) => {
      return transferToNumber(val);
    };
    return {
      state,
      hidden,
      find,
      assetsAccount,
      recharge,
      cash,
      goexchange,
      decimalDigitsInputFilter,
      accAdd,
      securityInfo,
      confirm,
      onCancel,
      dolt,
      onVerfiedConfirm,
      onVerfiedCancel,
      isVerified,
      viewSafeStatus,
      handleExchange,
      virtual_wallet,
    };
  },
};
</script>

<style lang="less" scoped>
.acount {
  width: 100%;
}
.header {
  padding: 20px 30px;
  box-sizing: border-box;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-6 {
  margin-bottom: 6px;
}
.mr-16 {
  margin-inline-end: 16px;
}
.textf-din {
  font-family: DINPro;
  max-width: 250px;
}
.up {
  min-width: 58px;
  padding: 0 5px;
  height: 22px;
  line-height: 20px;
  margin-inline-start: 17px;
}
.right {
  min-width: 157px;
}
.table {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}

// 账单明细
.detail {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

.single {
  width: 100%;
  padding: 0 0 20px;
  box-sizing: border-box;
}
.single-line {
  li {
    width: 33%;
  }
}
.cust-input/deep/ .el-input--prefix .el-input__inner {
  padding-inline-start: 40px;
  box-sizing: border-box;
}
</style>
